import React, { Component } from 'react';
import './list.scss'
import { index_nav } from '../utils/api'
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {//加上this,this代表组件实例
            arr: []
        }
    }
    componentDidMount() {
        index_nav().then((res) => {
            this.setState({
                arr: res.data.list
            })
        })
    }
    render() {
        return (
            <div className='box1'>
                {
                    // 条件渲染map
                    this.state.arr.map((item, index) => {
                        return (
                            <div className="list" key={index} >
                                {/* 变量为属性值时，不用加引号，用{}括起来 */}
                                <img src={item.pic} alt="" />
                                <span>{item.name}</span>
                            </div>
                        )
                    })

                }

            </div>
        );
    }
}

export default List;